<template>
  <el-dialog :visible.sync="isDetailsShow" width="90%">
    <div class="details-main">
      <h1 class="details-title">
        录入合同信息
      </h1>
      <div class="details-content">
        <div class="content-left">
          <h2 class="sub-title">合同文件信息</h2>
          <div class="pdf-box">
            <pdf :src="fileSrc" v-for="i in numPages" :page="i" :key="i"></pdf>
          </div>
        </div>
        <div class="content-right">
          <h2 class="sub-title">客户信息</h2>
          <div class="info-box">
            <el-form :model="enterData" :inline="true" :rules="enterRules" label-width="150px" ref="ruleForm">
              <el-form-item label="姓名：">
                <el-input v-model="customerInfo.customerName" disabled></el-input>
              </el-form-item>
              <el-form-item label="身份证号码：" >
                <el-input v-model="customerInfo.idCardNumber" disabled></el-input>
              </el-form-item>
              <el-form-item label="联系电话：" >
                <el-input v-model="customerInfo.mobile" disabled></el-input>
              </el-form-item>
              <el-form-item label="家庭地址：">
                <el-input v-model="customerInfo.cardAddress" disabled></el-input>
              </el-form-item>
              <el-form-item label="合同编号：" prop="contractNo">
                <el-input v-model="enterData.contractNo"></el-input>
              </el-form-item>
              <el-form-item label="贷款金额：" prop="amount">
                <el-input v-model="enterData.amount">
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
              <el-form-item label="贷款期限：" prop="limit">
                <el-input v-model="enterData.limit">
                  <template slot="append">月</template>
                </el-input>
              </el-form-item>
              <el-form-item label="贷款利率：" prop="rate">
                <el-input v-model="enterData.rate">
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
              <el-form-item label="LPR加点：" prop="lpr">
                <el-input v-model="enterData.lpr"></el-input>
              </el-form-item>
              <el-form-item label="客户账号：" prop="customerAccount">
                <el-input v-model="enterData.customerAccount"></el-input>
              </el-form-item>
              <el-form-item label="受托支付账户名：" prop="bankName">
                <el-input v-model="enterData.bankName"></el-input>
              </el-form-item>
              <el-form-item label="受托支付账户：" prop="bankAccount">
                <el-input v-model="enterData.bankAccount"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <div class="footer">
        <el-button type="primary" @click="submitBtn('ruleForm')">保存并发起审核</el-button>
        <el-button type="plain" @click="isDetailsShow = false">返回</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import pdf from 'vue-pdf'
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
import { entryContractInfo } from '@/api/contract'
export default {
  data () {
    return {
      fileSrc: '',
      numPages: 0,
      isDetailsShow: false,
      detailsData: {},
      baseData: {},
      customerInfo: {
        id: '', // 客户主键
        customerName: '', // 客户姓名
        idCardNumber: '', // 身份证号码
        mobile: '', // 联系电话
        cardAddress: '' // 家庭地址

      },
      enterData: {
        amount: '', // 贷款金额
        limit: '', // 贷款期限
        rate: '', // 贷款利率
        lpr: '', // LPR加点
        customerAccount: '', // 客户账号
        bankName: '', // 委托账户名
        bankAccount: '', // 委托账户
        contractNo: '' // 合同编号
      },
      enterRules: {
        amount: [
          { required: true, message: '内容不能为空', trigger: true },
          { pattern: /^\d+(\.\d+)?$/, message: '请输入数字' }
        ],
        limit: [
          { required: true, message: '内容不能为空', trigger: true },
          { pattern: /^\d+(\.\d+)?$/, message: '请输入数字' }
        ],
        rate: [
          { required: true, message: '内容不能为空', trigger: true },
          { pattern: /^\d+(\.\d+)?$/, message: '请输入合法的利率' }
        ],
        contractNo: [
          { required: true, message: '内容不能为空', trigger: true },
          { pattern: /^\d+(\.\d+)?$/, message: '请输入合法的合同编号' }
        ],
        lpr: [
          { required: true, message: '内容不能为空', trigger: true },
          { pattern: /^\d+(\.\d+)?$/, message: '请输入合法的lpr' }
        ],
        customerAccount: [
          { required: true, message: '内容不能为空', trigger: true },
          { pattern: /^[0-9]{19,19}$/, message: '客户账号只能为19位数字' }
        ],
        bankName: [
          { required: true, message: '内容不能为空', trigger: true }
        ],
        bankAccount: [
          { required: true, message: '内容不能为空', trigger: true },
          { pattern: /^[0-9]{19,19}$/, message: '受托支付账户只能为19位数字' }
        ]
      }
    }
  },
  components: {
    pdf
  },
  methods: {
    // 合同渲染
    ShowFile (base) {
      const pdfData = 'data:application/pdf;base64,' + base
      this.fileSrc = pdf.createLoadingTask({ url: pdfData, CMapReaderFactory })
      this.fileSrc.promise.then((pdf) => {
        this.numPages = pdf.numPages
      })
    },
    // 录入信息
    submitBtn (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const { id, templateId, templatePath } = this.detailsData
          const postData = {
            transId: '07135005', // 交易码
            accessHost: '1111', // mac地址
            cifSeq: '111',
            borrowId: id,
            templateId: templateId,
            borrowTemplatePath: templatePath,
            loanInfo: {
              productId: 1,
              productName: '好车贷',
              repayMethod: '每月20日为固定还款日',
              ...this.enterData
            },
            customer: {
              ...this.customerInfo
            }
          }
          entryContractInfo(postData).then(res => {
            if (res.data.data) {
              this.$message({
                type: 'success',
                message: '录入成功'
              })
              this.isDetailsShow = false
              this.$parent.getList()
            } else {
              this.$message({
                type: 'error',
                message: '录入失败'
              })
            }
          }).catch(err => {
            console.log(err)
          })
        } else {
          this.$message({
            type: 'error',
            message: '请输入合法的内容'
          })
          return false
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
  /deep/.el-dialog{
    min-width: 1200px;
    .details-main{
      width: 100%;
      .details-title{
        position: relative;
        width: 100%;
        padding: 20px 40px;
        font-size: 18px;
        box-sizing: border-box;
        box-shadow: 1px 1px 2px 1px rgba(0,0,0,.1);
        color: #333;
        margin: 10px 0;
        &:after{
          content: '';
          position: absolute;
          top: 0;
          bottom: 0;
          left: 10px;
          width: 8px;
          height: 70%;
          background-color: #409eff;
          margin: auto;
        }
      }
      .footer{
        display: flex;
        width: 100%;
        height: auto;
        padding: 20px 0;
        font-size: 18px;
        box-sizing: border-box;
        background-color: #eee;
        box-shadow: 1px 1px 2px 1px rgba(0,0,0,.1);
        color: #333;
        margin: 10px 0;
        justify-content: center;
        .el-button{
            width: 200px;
          height:45px;
        }
      }
      .details-content{
        display: flex;
        width: 100%;
        .sub-title{
          font-size: 16px;
          padding: 15px;
          box-sizing: border-box;
          border-bottom: 1px solid #ccc;
          background-color: #fafafa;
        }
        .content-left{
          width: 70%;
          box-shadow: 1px 1px 2px 1px rgba(0,0,0,.1);
          .pdf-box{
            width: 100%;
            height: 800px;
            overflow-y: auto;
          }
        }
        .content-right{
          width: 50%;
          box-shadow: 1px 1px 2px 1px rgba(0,0,0,.1);
          margin-left: 10px;
          .info-box{
            display: flex;
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
            /deep/.el-form-item{
              margin-bottom: 5px;
            }
            /deep/.el-form-item__label{
              text-align: left;
            }
            /deep/.el-input{
              width: 400px;
            }
          }
        }
      }
    }

  }

</style>
